<template>
	<!-- 首页导航工具栏 -->
	<view class="navigation-content">
		<view class="navigation-item" v-for="(item,index) in navigationDat" :key="index" @click="gotoOther(index)">
			<image :src="item.image_src"></image>
			<view >{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"navigation-tools",
		data() {
			return {
				// 导航工具数据
				navigationDat:[
					{
						id:1,
						image_src:"../../static/page-image/pre-goods.png",
						text:"排行榜",
					},
					{
						id:2,
						image_src:"../../static/page-image/pre-goods.png",
						text:"预约量房",
					},
					{
						id:3,
						image_src:"../../static/page-image/pre-goods.png",
						text:"房贷计算",
					},
					{
						id:4,
						image_src:"../../static/page-image/pre-goods.png",
						text:"服务承诺",
					},
				]
			};
		},
		methods:{
			gotoOther(i){
				if(i==2){//房贷计算器
					uni.navigateTo({
						url:"/subpages/mortgage-calculator/mortgage-calculator"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.navigation-content{
	width: 100%;
	margin-top: 50rpx;
	background: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20rpx 0;
	border: 1px solid #c7c7c7;
	border-radius: 20rpx;
	.navigation-item{
		width: 25%;
		font-size: 25rpx;
		text-align: center;
		image{
			width: 100rpx;
			height: 100rpx;
		}
	}
}
</style>